<script setup lang="ts">
import webTypes from 'devecoui-plus/web-types.json'
import elWebTypes from '@/json/el-web-types.json'
import {type PropType, reactive, ref, watch} from "vue";
import {convertString, getObjectByKeyValue, toPascalCase, transformString} from "@/utils/function";

const props = defineProps({
  name: {
    type: String,
    default: 'name'
  },
  type: {
    type: String as PropType<'attribute' | 'event' | 'slot' | 'method'>,
    default: 'attribute'
  },
  source: {
    type: String,
    default: 'devecoui'
  },
  mapping: {
    type: String,
    default: ''
  },
  // 忽略参数
  ignore: {
    type: Array,
    default: () => []
  },
  // 默认是否使用 炒肉串格式展示
  camelHump: {
    type: Boolean,
    default: false
  },
  // 是否使用名称变量开关
  isUseNameSwitch: {
    type: Boolean,
    default: true
  }
})
const nameTypeObj = ref({
  attribute: {
    zh: '属性名',
    en: 'Props'
  },
  event: {
    zh: '事件名',
    en: 'Events'
  },
  slot: {
    zh: '插槽名',
    en: 'Slots'
  },
  method: {
    zh: '方法名',
    en: 'Methods'
  }
})
const columns = reactive([
  {
    label: nameTypeObj.value[props.type].zh,
    prop: 'name',
  },
  {
    label: '说明',
    prop: 'description',
  },
  {
    label: '类型',
    prop: 'type',
    align: 'center',
    hide: ['slot'].includes(props.type),
  },
  {
    label: '默认值',
    prop: 'default',
    align: 'center',
    hide: props.type !== 'attribute',
  }
])
const list: any = ref([])

const useCamelHump = ref(props.camelHump)

const initData = async () => {
  let json: any[] = [];
  if (props.source === 'devecoui') {
    json = webTypes.contributions.html["vue-components"]
  }else if (props.source === 'parameter-information') {
    json = webTypes.contributions.html["parameter-information"]
  } else {
    json = elWebTypes.contributions.html["vue-components"]
  }
  const data: any = await getObjectByKeyValue(json, 'name', props.name)
  const ignoreEvent = (data: any) => {
    if (props.ignore.length === 0) return data
    return data.filter((item: any) => !props.ignore.includes(item.name))
  }
  if (props.type === 'attribute') {
    list.value = ignoreEvent(data?.props || [])
  } else if (props.type === 'event') {
    list.value = ignoreEvent(data?.js?.events || [])
  } else if (props.type === 'slot') {
    list.value = ignoreEvent(data?.slots || [])
  } else if (props.type === 'method'){
    list.value = ignoreEvent(data?.methods || [])
  }
}


watch(()=>props,()=>{
  initData();
},{immediate:true})
</script>

<template>
  <div class="web-types">
    <h4 style="margin-bottom: 20px">
      <slot name="title">
        {{ props.mapping }} {{ toPascalCase(props.name) }} {{ nameTypeObj[props.type].en }}
      </slot>
    </h4>
    <dev-search-table emptyText="—" :data="list" :openRequest="false" :columns="columns">
      <template #table-top v-if="props.isUseNameSwitch && props.type!=='slot'">
        <el-switch active-text="使用驼峰命名"
                   v-model="useCamelHump"
                   inline-prompt
                   style="--el-switch-on-color: #F5A623; --el-switch-off-color: #4A90E2"
                   size="large"
                   inactive-text="使用烤肉串命名"></el-switch>
      </template>

      <template #name="{item}">
        <dev-copy :show-tooltip="false" :show-icon="false" :text="!useCamelHump ? item.name : transformString(item.name, false)" only-copy-text>
          {{ !useCamelHump ? convertString(item.name, 'kebab') : convertString(item.name, 'camel') }}
        </dev-copy>
      </template>
      <template #type="{item}">
        <span>{{ item.type ? item.type.join(' | ') : props.type === 'event' ? 'Function' : '—' }}</span>
      </template>
      <template #enum="{item}">
        <span>{{ item.enum ? item.enum.join(' | ') : '—' }}</span>
      </template>
    </dev-search-table>
  </div>
</template>

<style>
.web-types table {
  display: table !important;
  overflow-x: visible;
  margin:0;
  border-collapse: collapse;
}
</style>
